// import React from "react";
import React from "react";
import { Button, Checkbox, Form, Input ,message } from "antd";
import { useNavigate } from "react-router-dom";
import "./index.less";
import { checkLogin } from "../../api/account";
import axios from "axios";
import {
  DesktopOutlined,
  FileOutlined,
  PieChartOutlined,
  TeamOutlined,
  LockOutlined,
  UserOutlined,
} from "@ant-design/icons";

export default function Login() {

  const navigate = useNavigate();
  const [messageApi, contextHolder] = message.useMessage();

  const onFinish = async (values) => {
    console.log("Success:", values);
    let res = await checkLogin(values);
    let { code, msg } = res.data;
    if (code == 0) {
      let { id, role, token } = res.data;
      // 将用户数据 存储到本地==其他页面可以通过本地获取出来使用
      localStorage.setItem("user", JSON.stringify({ id, role, token }));

      // 跳转首页
      navigate("/home");
    } else {
      messageApi.open({
        type: "success",
        content: msg,
      });
    }

  };

  // const onFinishFailed = (errorInfo) => {
  //   console.log("Failed:", errorInfo);
  // };
  return (
    <>
      <div className="sum">
        <div className="bg">
          <div className="lg">系统登录</div>
          <Form
            name="basic"
            style={{
              maxWidth: 600,
            }}
            // input框的默认值
            initialValues={{
              remember: true,
            }}
            // 点了 登录按钮之后的钩子函数
            onFinish={onFinish}
            // onFinishFailed={onFinishFailed}
            autoComplete="off"
          >
            <Form.Item
              name="account"
              rules={[
                {
                  required: true,
                  message: "请输入账号",
                },
              ]}
            >
              <Input
                placeholder="请输入账号"
                className="user"
                prefix={<UserOutlined />}
              />
            </Form.Item>

            <Form.Item
              name="password"
              // label="密码"
              rules={[
                {
                  required: true,
                  message: "请输入密码",
                },
              ]}
            >
              <Input.Password
                placeholder="请输入密码"
                className="password"
                prefix={<LockOutlined />}
              />
            </Form.Item>

            <Form.Item>
              <Button block type="primary" htmlType="submit">
                登录
              </Button>
            </Form.Item>
          </Form>
        </div>
      </div>
    </>
  );
}
